/* - CSS for general in website -*/

.body-main-content {
	margin: 0;
	font-family: Helvetica Neue, Calibri, Serif;
	box-sizing: border-box;
}

/* navigation */
ul {
  list-style-type: none;
  margin: 0;
  padding: 20; /*  space on the left screen before first lsit*/
  overflow: hidden;
  background-color:#394e99;
  min-width: 800px;
  clear: both;
}

li {
  float: left;
}

li a, .dropmenu {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropmenu {
  background-color: #acb6dc;
  color: #000000;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f8f8f8;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px #dadada;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #eaeaea;}

.dropdown:hover .dropdown-content {
  display: block;
}


/* Process Panel */

div.body-process-panel {
	width: 95%;
	border: 0px solid #000000;
	box-sizing: border-box;
	height: auto;
	margin: auto;
	min-height: 389px;
}

div.body-process-panel-features {
	width: 48%;
	min-width: 380px;
	min-height: 380px;
	border: 1px solid #dedede; 
	background-color: #fefefe;
	max-width: 300px;
	margin: 10px;
	box-sizing: border-box;
	text-align: center;
	float: left;
}

div.body-process-panel-features img {
	width: 100%;
	height: auto; 
	max-width: 250px;
}

div.body-process-panel-features p {
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	font-size: 1.2em;
}

div.body-process-panel-features2 {
	width: 90%;
	min-width: 380px;
	min-height: 380px;
	border: 1px solid #dedede; 
	background-color: #fefefe;
	max-width: 300px;
	margin: 10px;
	box-sizing: border-box;
	text-align: center;
	float: left;
}

div.body-process-panel-features2 img {
	width: 100%;
	height: auto; 
	max-width: 250px;
}

div.body-process-panel-features2 p {
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	font-size: 1.2em;
}


div.body-process-panel-link {
	width: 99%;
	border: 0px solid #dedede; 
	background-color: #fefefe;
	margin: 10px;
	box-sizing: border-box;
	clear: both;
}

div.body-process-panel-link h3 {
	margin-top: 20px;
}

div.body-process-panel-link img {
	width: 20%;
	height: auto;
	max-width: 200px;
	margin-right: 20px;
}
/* Ending */

div.body-content-end {
	clear: both;
	background-color: #efefef;
	width: 100%;
	min-height: 300px;
	box-sizing: border-box;
	height: auto;
}

.body-content-end p {
	position: relative;
	top: 25px;
	padding-left: 25px;
	font-size: 0.9em;
}

.body-content-end ul
{
  padding: 20px;
  background-color: transparent;
}

.body-content-end li
{
	padding: 10px;
	clear: both;
	display: block;
}

.body-content-end a:link{
	text-decoration: none;
	color: #3386a5;
}

.body-content-end a:visited{
	text-decoration: none;
	color: #3386a5;
}

.body-content-end a:hover{
	text-decoration: none;
	font-weight: bold;
	color: #1a546a;
}

.body-logo-sign-in 
{
	float: left;
	width: 49%;
	border: 0px solid #000000;
	box-sizing: border-box;
	text-align: center;
	margin-top: 25px;
}

/*---- START Sign out and sign up link----*/
a.sign-out-link:link
{
font-size:1.5em;
color: #4659a3;
text-decoration: none;
padding: 15px;
background-color: #f8f8f8;
}

a.sign-out-link:active
{
font-size:1.5em;
color: #4659a3;
text-decoration: none;
padding: 15px;
}

a.sign-out-link:hover
{
font-size:1.5em;
color: #4659a3;
text-decoration: none;
padding: 15px;
background-color: #dadada;
}

a.sign-out-link:visited
{
font-size:1.5em;
color: #4659a3;
text-decoration: none;
padding: 15px;
}

a.sign-up-link:link
{
color: #4659a3;
text-decoration: none;
padding: 15px;
}

a.sign-up-link:active
{
color: #4659a3;
text-decoration: none;
padding: 15px;
}

a.sign-up-link:hover
{
color: #4659a3;
text-decoration: underline;
padding: 15px;
}

a.sign-up-link:visited
{
color: #4659a3;
text-decoration: none;
padding: 15px;
}

/*---- END Sign out and sign up link----*/

.body-sign-up-form
{
	float: left;
	margin-left: 100px;
	width: 90%;
	border: 0px solid #000000;
	box-sizing: border-box;
}

.body-sign-up-form legend
{
	font-size: 1.2em;
	font-weight: bold;
}

.body-sign-up-form label
{
	display: block;
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 1.5em;
	font-weight: bold;
}

.body-sign-up-form select
{
	display: block;
	margin-top: 20px;
	font-size: 1.5em;
	font-weight: bold;
}

/* ---- Medilet Share -----*/

div.bodys-process-panel {
	width: 98%;
	margin: auto;
	border: 0px solid #000000;
	box-sizing: border-box;
	height: auto;
	min-height: 389px;
}

a:link.index-alphabet {
padding: 10px;
background-color: #eaeaea;
border: 1px solid #cacaca;
font-size: 1.5em;
text-decoration: none;
display: inline-block;
}

a:visited.index-alphabet {
padding: 10px;
background-color: #eaeaea;
border: 1px solid #cacaca;
font-size: 1.5em;
text-decoration: none;
display: inline-block;
}

a:hover.index-alphabet {
padding: 10px;
background-color: #dadada;
border: 1px solid #cacaca;
font-size: 1.5em;
text-decoration: none;
display: inline-block;
}

p.index-alphabet-head {
width: 95%;
font-size: 1.5em;
font-weight: bold;
}

p.index-alphabet {
width: 95%;
margin-left: 20px;
font-size: 1.5em;
border-bottom: 1px solid #acacac;
}

a:link.index-alphabet-download {
position: absolute;
left: 650px;
text-decoration: none;
}

a:hover.index-alphabet-download {
position: absolute;
left: 650px;
text-decoration: none;
font-weight: bold;
}


/* - - - - Identification - - - -*/

div.body-identification-panel {
width: 90%;
border: 0px solid #000000;
box-sizing: border-box;
height: auto;
min-height: 389px;
margin: auto;
}

div.body-identification-panel h2 {
margin-left: 30px;
box-sizing: border-box;
}

a.a-identification-guide {
padding: 10px;
border: 1px solid #dadada;
background-color: #eeeeee;
text-decoration: none;
}

div.body-identification-panel-formL{
display: inline-block;
box-sizing: border-box;
border: 0px solid #000000;
width: 25%;
max-width: 300px;
min-width: 270px;
}

div.body-identification-panel-formR{
display: inline-block;
box-sizing: border-box;
border: 0px solid #000000;
font-size: 1.2em;
vertical-align: top;
min-height: 350px;
width: 70%;
min-width: 400px;
max-width: 800px;
}


div.body-identification-panel-formR label{
font-weight: bold;
font-size: 1.2em;
}

div.body-identification-panel-formR select{
width: 80%;
padding: 15px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
font-size: 0.9em;
}

div.body-identification-panel-formR option{
font-size: 0.9em;
}

div.body-identification-panel-formR input[type=text]{
  width: 40%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.identification-btn-submit{
padding: 20px;
width: 150px;
font-size: 1.0em;
}

/* Result page */
.result-p-alert {
font-weight: bold;
font-size: 1.2em;
}

div.result-information{
width: 95%;
border-bottom: 1px solid #36609e;
box-sizing: border-box;
height: auto;
margin: auto;
}


div.result-row{
width: 95%;
border-bottom: 1px solid #36609e;
box-sizing: border-box;
height: auto;
margin: auto;
margin-top: 20px;
}

div.result-sub-picture{
width: 30%;
border: 0px solid #000000;
display: inline-block;
box-sizing: border-box;
vertical-align: top;
max-width: 300px;
}

div.result-sub-detail{
width: 60%;
border: 0px solid #000000;
display: inline-block;
box-sizing: border-box;
vertical-align: top;
margin-left: 20px;
}

a:link.result-a-button{
padding: 10px;
background-color: #394e99;
text-decoration: none;
border: 2px solid #e7e7e7;
border-radius: 5px;
color: #ffffff;
display: inline-block;
margin-left: 30px;
font-size: 0.9em;
font-weight: bold;
}

a:visited.result-a-button{
padding: 10px;
background-color: #394e99;
text-decoration: none;
border: 2px solid #e7e7e7;
border-radius: 5px;
color: #ffffff;
display: inline-block;
margin-left: 30px;
font-size: 0.9em;
font-weight: bold;
}

a:hover.result-a-button{
padding: 10px;
background-color: #acb6dc;
text-decoration: none;
border: 2px solid #e7e7e7;
border-radius: 5px;
color: #000000;
display: inline-block;
margin-left: 30px;
font-size: 0.9em;
font-weight: bold;
}

/*  Trade detail */

div.TradeDetail-row{
width: 99%;
border: 0px solid #000000;
box-sizing: border-box;
height: auto;
margin: auto;
margin-top: 20px;
}


div.TradeDetail-sub-picture{
width: 49%;
border: 0px solid #000000;
display: inline-block;
box-sizing: border-box;
vertical-align: top;
min-width: 520px;
max-width: 520px;
margin-left: 25px;
}

.TradeDetail-sub-picture img{
width: 100%;
height: auto;
max-width: 500px;
}

div.TradeDetail-sub-detail{
width: 49%;
border: 0px solid #000000;
display: inline-block;
box-sizing: border-box;
vertical-align: top;
margin-left: 25px;
min-width: 520px;
}

/* ------- Mainhelp  ------- */

.help-contentL{
width: 25%;
max-width: 400px;
min-width: 310px;
border: 0px solid #000000;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
margin-left: 25px;
}

.help-contentL img{
height: auto;
width: auto;
max-width: 300px;
}


.help-contentR{
width: 74%;
max-width: 900px;
min-width: 400px;
border: 0px solid #000000;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
margin-left: 25px;
}

.help-contentR p{
margin-left: 25px;
font-size: 1.2em;
font-weight: bold;
}

.help-contentR a:link{
text-decoration: none;
padding: 15px;
border: 1px solid #cacaca;
/*background-color: #a4cdf9;*/
background-color: #b6c69b;
display: block;
color: #000000;
}

.help-contentR a:visited{
text-decoration: none;
padding: 15px;
border: 1px solid #cacaca;
/*background-color: #a4cdf9;*/
background-color: #b6c69b;
display: block;
color: #000000;
}

.help-contentR a:hover{
text-decoration: none;
padding: 15px;
border: 1px solid #cacaca;
/*background-color: #547fae;*/
background-color: #748c4b;
display: block;
color: #ffffff;
}

/* ------- terminology  ------- */

.term-contentL{
width: 25%;
max-width: 400px;
min-width: 310px;
border: 0px solid #000000;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
margin-left: 25px;
}

.term-contentL img{
height: auto;
width: auto;
max-width: 300px;
}


.term-contentR{
width: 74%;
max-width: 900px;
min-width: 400px;
border: 0px solid #000000;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
margin-left: 25px;
}

/* - - - - - Broswe - - - - - -*/

.browse-genericname-content{
	width: 95%;
	border: 0px solid #000000;
	box-sizing: border-box;
	height: auto;
	margin: auto;
}


/* Quick search*/

div.body-process-panel-features input[type=text]{
  width: 99%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
div.body-process-panel-features input[type=radio]{
  display: inline-block;
}

div.body-process-panel-features input[type=submit]{
display: inline-block;
padding: 10px;
width: 150px;
font-size: 1.0em;
margin-top: 10px;
}

/* About */

.td-tab-milestone-col1{
width: 30%;
min-width: 300px;
border-bottom: 1px dotted #acacac;
}

.td-tab-milestone-col2{
width: 25%;
min-width: 300px;
border-bottom: 1px dotted #acacac;
}

.td-tab-milestone-col3{
width: 45%;
min-width: 550px;
border-bottom: 1px dotted #acacac;
}

.adminmember-tab-head-tr{
background-color: #f6f8f9;
height: 35px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}

.adminmember-tab-head-td-col01{
font-size: 1.1em;
font-weight: bold;
width: 23%;
}

.adminmember-tab-head-td-col02{
font-size: 1.1em;
font-weight: bold;
width: 22%;
}

.adminmember-tab-head-td-col03{
font-size: 1.1em;
font-weight: bold;
width: 15%;
}

.adminmember-tab-head-td-col04{
font-size: 1.1em;
font-weight: bold;
width: 20%;
}

.adminmember-tab-head-td-col05{
font-size: 1.1em;
font-weight: bold;
width: 20%;
}

.adminmember-tab-td-col01{
width: 23%;
border-bottom: 1px dotted #000000;
vertical-align: top;
}

.adminmember-tab-td-col02{
width: 22%;
border-bottom: 1px dotted #000000;
vertical-align: top;
}

.adminmember-tab-td-col03{
width: 15%;
border-bottom: 1px dotted #000000;
vertical-align: top;
}

.adminmember-tab-td-col04{
width: 15%;
border-bottom: 1px dotted #000000;
vertical-align: top;
}

.adminmember-tab-td-col05{
width: 20%;
border-bottom: 1px dotted #000000;
vertical-align: top;
}

a:link.adminmember-tab-a{
text-decoration: none;
margin-left: 5px;
}

a:visited.adminmember-tab-a{
text-decoration: none;
margin-left: 5px;
}

a:hover.adminmember-tab-a{
text-decoration: none;
font-weight: bold;
margin-left: 5px;
}